<template>
	<view class="goods_main">
		<view class="no_html" v-if="list.length==0">
			<image src="@/static/images/no_img2.png" mode=""></image>
			<text>暂无商品信息</text>
		</view>
		<scroll-view v-else scroll-y="true" class="scroll-Y" @scrolltolower='scrolltolower'>
			<view class="shadow-s rd-16 p-20 bg-info-1 my-20" @click="detailsBtn(item)"  v-for="(item,index) in list" :key="index">
				<view class="flex-y-center justify-between u-border-bottom pb-20 mb-20">
					<view class="fs-30"><span class="color-primary inline">{{item.template.id}}</span>-{{item.template.name}}</view>
					<view class="color-success-4">{{item.template.all_link_haoduan}}</view>
				</view>
				<view class="flex">
					<view class="rd-10 w-280 h-200 mr-20 relative overflow-hidden">
						<image class="w-100v h-100v" :src="item.template.photos_text" mode="aspectFill"></image>
						<view class="absolute bg-success c-fff bottom-0 lef-0 right-0 py-4 text-nowrap fs-20 w-100v opacity-90" v-if="item.template.banli_age">{{item.template.banli_age}}</view>
					</view>
					<view class="w-90v flex flex-wrap content-between">
						<view class="w-100v">
							<div>
								<span class="rd-8 px-10 py-4 mb-10 mr-10 fs-20 text-nowrap inline-block" :style="'color:'+it.size_color+';background-color:'+it.background_color" v-for="(it,idx) in item.template.label_json">{{it.label}}</span>
								<span class="bg-error-1 color-error  rd-8 px-10 py-4 mb-10 fs-20 text-nowrap inline-block">复制充值链接</span>
							</div>
							
							<u-parse class="fs-22 c-666 text-nowrap" :content="item.template.index_content"></u-parse>
						</view>
						<view class="flex-between-center text-center w-100v">
							<view class="bg-primary-2 color-primary flex-center w-100v rd-6 py-10 mr-10" @click.stop="share(item)">
								<text class="siconfont icon-share-fill"></text>分享
							</view>
							<view class="bg-primary c-fff w-100v rd-6 py-10 ml-10">
								立即办理
							</view>
							
						</view>
					</view>
				</view>
			</view>
			<view class="mt-20">
				<u-loadmore :status="status" color='#999' />
			</view>
		</scroll-view>
		
		<!-- 分享弹窗 -->
		<u-popup :show="showshare" @close="showshare=false" mode="bottom" round="10" :closeable="true">
			<view class="p-20 py-60 fs-28 text-center">
				<view class="u-border-bottom p-20">复制链接</view>
				<view class="p-20">保存海报</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	export default {
		name:"user_goods",
		props: {
			value: {
				type: Object,
				default: () => {}
			},
		},
		data() {
			return {
				list:[],
				status: 'loadmore',//加载前值为loadmore，加载中为loading，没有数据为nomore
				searchform:{},//搜索条件整合
				showshare:false,//分享弹窗
			};
		},
		mounted() {
			// this.goodsList()
		},
		methods:{
			goodsList(){
				var that = this
				that.searchform = that.value;
				if(!that.searchform.page){
					// 没有page的情况赋值一个page参数
					that.searchform.page = 1;
				}
				
				if(that.searchform.page==1){
					that.$tips.showLoading('加载中')
				}else{
					that.status = 'loading'
				}				
				that.$httpApi.productList(that.searchform).then((res) => {
					if (res.code == 1) {
						if (that.searchform.page == 1) {
							that.list = []
							that.$tips.hideLoading()
						}
						if (res.data.rows.length<1) {
							that.status = 'nomore';
							console.log("没有数据了");
						} else {
							that.status = 'loadmore'
						}
						that.list=that.list.concat(res.data.rows)
					}
				})
			},
			// 滚动
			scrolltolower(){
				if(this.status=='nomore'){
					return
				}
				this.searchform.page++
				this.goodsList()
			},
			// 详情
			detailsBtn(info){
				uni.navigateTo({
					url:'/pages/mall/details_first?id='+info.id
				})
			},
			// 分享
			share(item){				
				this.showshare = true;
			},
		}
	}
</script>

<style lang="less">
	.goods_main{
		width: 100%;
		height: 100%;
		.scroll-Y{
			width: 100%;
			height: 100%;
			padding-top: 24rpx;
		}
		.no_html{
			padding:50px 0;
		}
	}
</style>